﻿@{
    Layout = null;
}
<section class="content-header">
    <h1>
        @{
            var title = "";
            if (ViewBag.Todo == null)
            {
                title = "VIU管理";
            }
            else if (ViewBag.Todo == "my")
            {
                title = "我的VIU";
            }
            else if (ViewBag.Todo == "review")
            {
                title = "待审VIU";
            }
        }
        @title
    </h1>
    <ol class="breadcrumb">
        <li><a href="@Url.Action("Index", "Home")"><i class="fa fa-home"></i> 首页</a></li>
        <li class="active">VIU</li>
    </ol>
</section>


<div class="bs-VIUs" id="bs-VIUs">
    <section class="content text-center" role="alert" data-bind="visible:statusText().indexOf('无数据')>-1">

        <div class="col-lg-12">
            <h1 data-bind="text:statusText">正在加载数据！</h1>
        </div>

    </section>
    <ul class="VIU-list pad no-print" data-bind="foreach:dataList">
        <li class="callout VIU">
            <div class="VIU_body" style="background-color: #fff">
                <div class="col-md-9">
                    <ul class="list-inline list-unstyled">
                        <!--ko if: thumbUrl!=null -->
                        <li class="col-md-3"><img data-bind="attr:{src:thumbUrl}" src="" alt="缩略图" class="pull-left img-thumbnail img-responsive"></li>
                        <!-- /ko -->
                        <li class="col-md-9">
                            <h4 class="VIU-title"><span class="badge" data-bind="text:category.name">动物</span> <a href="#" data-bind="text:title,attr:{ href:'javascript:window.app.loadUI(\'@Url.Action("Edit")/?id='+id+'\')'}">熊猫宝宝给对方做马杀鸡</a></h4>
                            <div class="btn-group btn-group-sm" role="group">
                                <button type="button" class="btn btn-danger" data-bind="click:$root.deleteItem"><i class="fa fa-trash"></i> 删除</button>
                                <button type="button" class="btn btn-success" data-bind="attr:{class:isChecked?'btn btn-default':'btn btn-danger'},click:$root.goToReView"><i class="fa fa-check-circle" data-bind="attr:{class:isChecked?'fa fa-check-circle':'fa fa-warning'}"></i> <!--ko text:isChecked?'已审核':'未审核'--> <!-- /ko --></button>
                                <button type="button" class="btn btn-default"><i class="fa fa-send"></i> 位置</button>
                            </div>
                        </li>
                    </ul>

                </div>
                <div class="col-md-3 hidden-xs visible-md visible-lg">

                    
                    <p class="rating" data-bind="html:starHtml">
                    </p>
                    <p class="">
                        <i class="fa fa-calendar"></i> <!--ko text:' ' + checkInTime--> <!-- /ko -->
                        <i class="fa fa-eye"></i> <!--ko text:' ' + hits--> <!-- /ko -->
                        <i class="fa fa-heart"></i> 0
                    </p>
                    
                </div>
            </div>
            <footer class="clearfix">
                <div class="col-xs-12 col-md-6">
                    <label class="pull-left">所属领域：</label><ul class="list-inline pull-left" data-bind="foreach:fields"><li data-bind="text:name">萌宠</li></ul>
                </div>
                <div class="col-xs-12 col-md-6">
                    <label class="pull-left ">属性：</label><ul class="list-inline pull-left" data-bind="foreach:tags"><li><label data-bind="text:name" class="label">赚钱</label></li></ul>
                </div>
            </footer>
        </li>


    </ul>


</div>

<style>
    .VIU-list {
    }

        .VIU-list .VIU {
            list-style: none;
            -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin-top: 0px;
            background: #fff;
            color: #444;padding-bottom: 0;
        }

        .VIU-list .VIU {
            padding-left: 0;
            padding-right: 0;
        }

        .VIU-list .VIU {
            padding-left: 0;
            padding-right: 0;
        }

        .VIU-list .VIU {
            padding-left: 0;
            padding-right: 0;
        }

        .VIU-list .VIU {
            padding-left: 0;
            padding-right: 0;
        }

            .VIU-list .VIU .VIU-content {
                width: 100%;
                height: 90px;
            }

            .VIU-list .VIU .VIU_body {
                padding-bottom: 9px;
                overflow: hidden;
            }

            .VIU-list .VIU .img-thumbnail {
                height: 90px;
            }



            .VIU-list .VIU .VIU-title a {
                color: #444;
                text-decoration: none;
            }



            .VIU-list .VIU footer {
                padding-top: 10px;
                padding-bottom: 10px;
                padding-left: 10px;
                clear: both;
                color: white;
                background-color: #3C8DBC;
            }
</style>
<script src="~/Areas/CMS/ViewModel/VIU/Index.js"></script>
<script>
    var vm = new VIUIndexViewModel();
    var lastTimes = 0;
    var pageNo = 1;
    var scrollPage = function (event) {
        if ($("#bs-VIUs").length === 0) {
            // 解绑scroll事件
            $("#divMainContent").off('scroll', scrollPage);
            return false;
        }
        if ($("#bs-VIUs").height() - $("#divMainContent").height() - $("#divMainContent").scrollTop() < 58) {
            if (lastTimes === 3) {
                vm.getPage(++pageNo);
                lastTimes = 1;
            } else {
                lastTimes++;
            }
        }
    }
    $(function () {

        vm.todo = '@ViewBag.Todo';
        vm.init();
        ko.applyBindings(vm, $("#bs-VIUs")[0]);


        // 绑定scroll事件
        $("#divMainContent").on('scroll', scrollPage);


    });
</script>